<template>
  <div id="app">
    <transition name="fade" mode="out-in">
      <router-view> </router-view>
    </transition>
  </div>
</template>

<script>
import { icontont, login } from "./utils/api";
export default {
  name: "app",
  data() {
    return {

    };
  },
  components: {},
  created() {
    //     indexee('12345').then(res=>{})
    // console.log(window);
    // if(window.name == ""){
    // console.log("首次被加载");
    // window.name = "isReload"; // 在首次进入页面时我们可以给window.name设置一个固定值 
    // }else if(window.name == "isReload"){
    // console.log("页面被刷新");
    // }
    var _beforeUnload_time = 0, __gap_time = 0;

    var is_fireFox = navigator.userAgent.indexOf('Firefox') > -1;
    window.onbeforeunload = function () {
      _beforeUnload_time = new Date().getTime();
      sessionStorage.setItem('_beforeUnload_time', _beforeUnload_time)
      indexee('断开前').then(res => { })
      // if (is_fireFox) {
      //   indexee('关闭火狐').then(res => { })
      // }

    }




    window.onload = function (e) {
      if (sessionStorage.getItem('_beforeUnload_time')) {
        // let
        // indexee(new Date().getTime() - sessionStorage.getItem('_beforeUnload_time')).then(res=>{})
        indexee('刷新').then(res => { })
      } else {
        indexee('首次进入').then(res => { })
      }
    }


    // window.addEventListener(
    //   "pagehide",
    //   (event) => {
    //     if (!event.event) {
    //       indexee('关闭pagehide').then((res) => { });
    //       /* the page isn't being discarded, so it can be reused later */
    //     }
    //   },
    // );
    // window.onbeforeunload = function () {
    //   beginTime = new Date().getTime();
    // };

    // window.addEventListener('visibilitychange', function (event) {
    //   indexee('visibilitychange').then(res=>{})
    // //   // console.log(document.visibilityState,event);
    //   if (document.visibilityState === 'visible') {
    //     // 页面变为可见状态时的操作
    //     // __gap_time = (new Date().getTime() - _beforeUnload_time);
    //    indexee('visible').then(res=>{})

    //   } else if (document.visibilityState === 'hidden') {
    //     // 页面变为不可见状态时的操作
    //     indexee('hidden').then(res=>{})
    //   }
    //   // 执行相应的操作
    //   // if(__gap_time <= 5){
    //   //   indexee('关闭').then(res=>{})
    //   // }else{
    //   //   let str = _beforeUnload_time +'---'+ __gap_time
    //   // indexee(_beforeUnload_time - __gap_time).then(res=>{})
    //   //   // indexee('刷新').then(res=>{})
    //   //   // indexee(str).then(res=>{})
    //   // }
    // });

      // console.log(PerformanceNavigationTiming);
      // debugger
    let beginTime = 0; //开始时间
    let differTime = 0; //时间差
    // window.onunload = function () {
    //   differTime = new Date().getTime() - beginTime;
    //   indexee("首次进入").then((res) => { });
    //   if (differTime <= 5) {
    //     console.log("这是关闭");
    //   } else {
    //     console.log("这是刷新");
    //   }
    // };
  },
  watch: {},
  mounted() {
    var link =
      document.querySelector("link[rel*='icon']") ||
      document.createElement("link");
    link.type = "image/x-icon";
    link.rel = "shortcut icon";
    icontont(sessionStorage.getItem("token")).then((res) => {
      if (res.data.status) {
        link.href = "https://bjsf.bjsky.top" + res.data.data[0].value;
      } else {
        this.$message.error(res.data.msg);
      }
    });

    // let beginTime = 0; //开始时间
    // let differTime = 0; //时间差
    // window.onunload = function () {
    //   differTime = new Date().getTime() - beginTime;
    //   indexee("首次进入").then((res) => {});
    //   if (differTime <= 5) {
    //     console.log("这是关闭");
    //   } else {
    //     console.log("这是刷新");
    //   }
    // };
    // window.onbeforeunload = function () {
    //   beginTime = new Date().getTime();
    // };
  },
  methods: {},
  beforeDesTory() {
  },
};
</script>
<style>
@import "./assets/css/main.css";
@import "./assets/css/color-dark.css";

/*深色主题*
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

/*定义滚动条轨道*/
::-webkit-scrollbar-track {
  background-color: transparent;

  border-radius: 4px;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  background-color: rgba(50, 65, 87, 0.4);
  border-radius: 4px;
}

.royConetng {
  width: auto;
  height: 100%;
  padding: 10px;
  overflow-y: scroll;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.tops {
  padding: 0px;
  background: #324157;
  position: relative;

  box-sizing: border-box;
  width: 100%;
  height: 70px;
  font-size: 22px;
  color: #fff;
}

.rights {
  background: #324157;
  text-align: left;
  position: absolute;
  left: 0;
  top: 70px;
  bottom: 0;
  width: 200px;
}

.rightsTrue {
  background: #324157;
  text-align: left;
  position: absolute;
  left: 0;
  top: 70px;
  bottom: 0;
  width: 60px;
}

.lefts {
  position: absolute;
  left: 200px;
  right: 0;
  top: 70px;
  bottom: 0;
  padding-bottom: 30px;
  -webkit-transition: left 0.3s ease-in-out;
  transition: left 0.3s ease-in-out;
}

.leftsTrue {
  position: absolute;
  left: 60px;
  right: 0;
  top: 70px;
  bottom: 0;
  padding-bottom: 30px;
  -webkit-transition: left 0.3s ease-in-out;
  transition: left 0.3s ease-in-out;
}

#app,
body,
html {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.tags-li.active {
  border: 1px solid #409eff;
  background-color: #409eff;
}

.name {
  margin: 0 20px;
  color: #fff;
  font-size: 16px;
}

.appRight {
  padding-right: 40px;
}

.appLeft {
  width: 200px;
  /*border-right: solid 1px #576780;*/
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #fff;
}

.displays {
  display: flex;
  align-items: center;
}

.displayJUscen {
  justify-content: space-between;
}

.el-header {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-container {
  height: 100vh;
}

.tags {
  position: relative;
  height: 30px;
  overflow: hidden;
  background: #fff;
  padding-right: 120px;
  box-shadow: 0 5px 10px #ddd;
}

.tags ul {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

.tags-li {
  float: left;
  margin: 3px 5px 2px 3px;
  border-radius: 3px;
  font-size: 12px;
  overflow: hidden;
  cursor: pointer;
  height: 23px;
  line-height: 23px;
  border: 1px solid #e9eaec;
  background: #fff;
  padding: 0 5px 0 12px;
  vertical-align: middle;
  color: rgb(0, 0, 0);
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
}

.tags-li:not(.active):hover {
  background: #f8f8f8;
}

.tags-li.active {
  color: #fff;
}

.tags-li-title {
  float: left;

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-right: 5px;
  color: rgb(0, 0, 0);
}

.tags-li.active .tags-li-title {
  color: #fff;
}

.tags-close-box {
  position: absolute;
  right: 0;
  top: 0;
  box-sizing: border-box;
  padding-top: 1px;
  text-align: center;
  width: 110px;
  height: 30px;
  background: #fff;
  box-shadow: -3px 0 15px 3px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.el-dropdown .el-button {
  margin: 0;
}

.sidebar>ul {
  height: 100%;
  background: #324157;
}

/* /deep/ .el-menu-item-group .el-menu-item-group__title {
  padding: 0;
} */
</style>
<style>
body {
  margin: 0px;
  padding: 0px;
  /*background: url(assets/bg1.jpg) center !important;
		background-size: cover;*/

  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
    Microsoft YaHei, SimSun, sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

#app {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 100%;
}

.container .main .menu-expanded[data-v-10444932] {
  flex: 0 0 200px !important;
  width: 230px;
}

.el-submenu [class^="fa"] {
  vertical-align: baseline;
  margin-right: 10px;
}

.el-menu-item [class^="fa"] {
  vertical-align: baseline;
  margin-right: 10px;
}

.toolbar {
  background: #f2f2f2;
  padding: 10px;
  /* border:1px solid #dfe6ec; */
  margin: 10px 0px;
}

.el-form-item {
  margin-bottom: 10px;
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.2s ease;
}

.fade-enter,
.fade-leave-active {
  opacity: 0;
}

.el-scrollbar {
  max-width: 300px;
}
</style>
